<template>
	<view class="content">
		<tabbar class="tabbar" :dataArray="dataArray" :checkedIndex="checkedIndex" @handleIndexChange="typeChange">
		</tabbar>
		<scroll-view scroll-y="true" class="scroll" v-if="checkedIndex==0">
			<view class="header">
				<image :src="img" class="background" mode="widthFix"></image>
				<image src="../../static/guided_icon_back_page@2x.png" @click="next()" class="btn_pre"></image>
				<image :src="start?playIconList[1]:playIconList[0]" @click="playClick(start)" class="btn-start"></image>
				<image src="../../static/guided_icon_advancing_page@2x.png" @click="next()" class="btn_next"></image>
				<video hidden id="myVideo" :src="url" class="hidden" @timeupdate="timeupdate" ref="video"
					@loadedmetadata="loadedmetadata"></video>
				<view class="line" :style="cssProps"></view>
			</view>
			<view class="detail">
				<view class="title">
					盐城市博物馆简介
				</view>
				<text>欢迎您来到盐城市博物馆参观。了解一座城市，从博物馆开始。始建于1961年的盐城市博物馆是一座研究和反映盐城地方历史发展的综合性博物馆，承载着盐城的千年风华，是联动历史与未来的桥梁。 </text>
				<text>盐城市博物馆现有1个基本陈列、3个专题展区和两个临时展区，六大展区构成了盐城城市文化和精神的展示、表达和体验场所。
				</text>
				<text>在这里，您可以感受盐城依淮傍海、以盐立城的历史文脉；湿地、森林、河流为一体的绿色生态景观图画；极富水乡特色的民间风俗和人文风情以及近年来盐城社会经济发展中的精彩片段、耀眼瞬间。
				</text>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scroll" v-if="checkedIndex==1">
		</scroll-view>
		<scroll-view scroll-y="true" class="scroll" v-if="checkedIndex==2">
			<introductionItem v-for="(item,index) in list" :id="item.id" :title="item.title" :img="item.img"
				:showMore="true" moreText="查看详情" @clickHandler="goTo"
				:style="index==list.length-1?'margin-bottom: 40rpx;':''">
			</introductionItem>
			<!-- <introductionItem :id="0" title="序厅" img="../../static/exhibition_img16@2x.png" :showMore="true"
				moreText="查看详情" @clickHandler="goTo">
			</introductionItem>
			<introductionItem :id="1" title="第一部分 依淮傍海 淮夷生息" img="../../static/exhibition_img01@2x.png" :showMore="true"
				moreText="查看" @clickMore="goTo($event,true)">
			</introductionItem>
			<introductionItem :id="2" title="第二部分 煮海之饶 以盐立城" img="../../static/exhibition_img02@2x.png" :showMore="true"
				moreText="查看" @clickMore="goTo($event,true)">
			</introductionItem>
			<introductionItem :id="3" title="第三部分 赋半天下 人文璀璨" img="../../static/exhibition_img03@2x.png" :showMore="true"
				moreText="查看" @clickMore="goTo($event,true)">
			</introductionItem>
			<introductionItem :id="4" title="第四部分 沧桑巨变 历史新篇" img="../../static/exhibition_img04@2x.png" :showMore="true"
				moreText="查看" @clickMore="goTo($event,true)" style="margin-bottom: 40rpx;"></introductionItem> -->
		</scroll-view>
	</view>
</template>

<script>
	import tabbar from '../customer/tabbar.vue'
	import searchBar from '../customer/searchBar.vue'
	import secTitle from '../customer/secTitle.vue'
	import antiqueItem from '../customer/antiqueItem.vue'
	import introductionItem from '../customer/introductionItem.vue'
	import {
		calcTimer
	} from '../../js_sdk/utils.js'
	import {
		doGet,
		doPostForm
	} from '../../js_sdk/request-helper.js'
	export default {
		components: {
			searchBar,
			tabbar,
			secTitle,
			antiqueItem,
			introductionItem,
		},
		data() {
			return {
				playshow: true, //播放的图片
				stipshow: false, //暂停的图片
				lock: false, // 锁
				currentTime: 0, //当前进度
				duration: 100, // 总进度
				videoContext: '',
				url: '',

				checkedIndex: 0,
				dataArray: [
					"本馆简介",
					"参观指南",
					"听讲解",
				],

				img: '../../static/total_img_banner@2x.png',
				start: false,
				playIconList: [
					'../../static/guided_icon_Play@2x.png',
					'../../static/guided_icon_closure@2x.png'
				],
				percent: '0%',

				list: []
			}
		},
		onLoad() {
			this.videoContext = uni.createVideoContext('myVideo')
			this.getAudio(1)
		},
		methods: {
			typeChange(index) {
				this.checkedIndex = index
				if (index != 0) {
					this.stop()
				}
				if (index == 2) {
					this.getList(2)
				}
			},
			goTo(e) {
				uni.navigateTo({
					url: "./antiqueList?id=" + e
				})
			},
			next() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
			},
			playClick(start) {
				// console.log(start)
				var audio = uni.createVideoContext
				// console.log(audio)
				if (start) {
					this.stop();
					// audio.currentTime = 0;
				} else {
					this.play();
				}
			},
			getAudio(typeCode) {
				doGet('/blade-museum/expl/listByType?typeCode=' + typeCode +
					"&museumId=" + uni.getStorageSync('museumId'), (res) => {
						this.url = res[0].audio
					}, (err) => {

					})
			},
			getList(typeCode) {
				doGet('/blade-museum/expl/listByType?typeCode=' + typeCode +
					"&museumId=" + uni.getStorageSync('museumId'), (res) => {
						this.list = res
					}, (err) => {

					})
			},

			// 播放
			play() {
				this.stipshow = true;
				this.playshow = false;
				this.start = true;
				this.videoContext.play();
			},
			// 暂停
			stop() {
				this.stipshow = false;
				this.playshow = true;
				this.start = false;
				this.videoContext.pause()
			},
			// 更新进度条
			timeupdate(event) {
				if (this.lock) return; // 锁
				var currentTime, duration, percent;
				if (event.detail.detail) {
					currentTime = event.detail.detail.currentTime
					duration = event.detail.detail.duration
				} else {
					currentTime = event.detail.currentTime
					duration = event.detail.duration
				}
				this.currentTime = currentTime
				this.duration = duration
				percent = (currentTime / duration) * 100
				// console.log(percent)
				this.percent = percent + '%'
				if (percent >= 99) {
					this.start = false
				}
			},

			// 拖动进度条
			sliderChange(data) {
				this.videoContext.seek(data.detail.value)
			},

			//拖动中
			sliderChanging(data) {
				this.currentTime = data.detail.value
			},

			// 视频加载完成
			loadedmetadata(data) {
				this.duration = data.detail.duration
			}
		},
		computed: {
			cssProps() {
				let params = {
					'--width': this.percent
				}
				return params
			},


			timer() {

				return calcTimer(this.currentTime)
			},
			overTimer() {

				return calcTimer(this.duration)
			}
		},
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		position: fixed;
		background: #eee;
	}

	.tabbar {
		background: #fff;
	}

	.scroll {
		height: calc(100% - 168rpx);
		width: 100%;
		/* display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between; */
	}

	.scroll .header {
		width: 100%;
		position: relative;
		display: flex;
		background: #fff;
	}

	.scroll .header .background {
		width: 100%;
		height: auto;
		margin-bottom: 10rpx;
	}

	.scroll .header .btn_pre {
		position: absolute;
		bottom: 50rpx;
		left: calc(50% - 160rpx);
		height: 60rpx;
		width: 60rpx;
		border-radius: 30rpx;
		z-index: 9;
	}

	.scroll .header .btn-start {
		position: absolute;
		bottom: 50rpx;
		left: calc(50% - 30rpx);
		height: 60rpx;
		z-index: 9;
		width: 60rpx;
		border-radius: 30rpx;
	}

	.scroll .header .btn_next {
		position: absolute;
		bottom: 50rpx;
		right: calc(50% - 160rpx);
		height: 60rpx;
		z-index: 9;
		width: 60rpx;
		border-radius: 30rpx;
	}

	.scroll .header .line {
		width: var(--width);
		position: absolute;
		bottom: 0;
		left: 0;
		height: 10rpx;
		background: #B9AC90;
		z-index: 9;
	}

	.scroll .center {
		background: #fff;
		width: calc(100% - 80rpx);
		padding: 40rpx;
	}

	.scroll .center .title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333;
	}

	.scroll .center .info {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666;
	}

	.scroll .detail {
		background: #fff;
		width: calc(100% - 80rpx);
		padding: 40rpx 20rpx;
		margin: 40rpx 20rpx;
	}

	.scroll .detail .title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		color: #333;
	}

	.scroll .detail text {
		display: inline-block;
		text-align: justify;
		text-indent: 2em;
		font-size: 32rpx;
		color: #666;
		line-height: 60rpx;
	}
</style>
